<template>
  <div class="box-column container-grid">
    <ux-header-search
      ref="searchHeader"
      v-bind="enquiryData"
      :btnsData="{ permissionsData }"
      @search="onQueryClick"
    ></ux-header-search>
    <div class="box-flex1 table">
      <vxe-grid
        v-bind="tableConfig"
        :data="dataStore.data"
        :columns="table.columns"
      >
        <template v-slot:operate="{ row }">
          <ux-btn-group
            :btns="table.btns"
            :data="{ row, permissionsData }"
          ></ux-btn-group>
        </template>
      </vxe-grid>
    </div>
    <div class="pagination-el box-row box-center-end">
      <el-pagination
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        :current-page="dataStore.proxy.page"
        :page-size="dataStore.proxy.pageSize"
        :page-sizes="dataStore.pageSizes"
        :total="dataStore.pagination.total"
        :layout="'total, sizes, prev, pager, next, jumper'"
      ></el-pagination>
    </div>
    <dialogForm
      ref="dialogForm"
      @submitSuccess="onSubmitSuccess"
      @closeDialog="onCloseDialog"
    ></dialogForm>
    <dialogOperation
      ref="dialogOperation"
      @submitSuccess="onSubmitSuccess"
      @closeDialog="onCloseDialog"
    >
    </dialogOperation>
    <!-- <dialogSet ref="dialogSet" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog"></dialogSet> -->
  </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, State } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import { mixinAccess } from "@/mixin/Access";
import dialogForm from "./Manageedit.vue";
import dialogOperation from "./Manageoperation.vue";
import dialogSet from "./Manageset.vue";
@Component({
  name: "equipmentManageDoorTable",
  mixins: [
    mixinTableStore,
    mixinTableHeader,
    mixinTableOperation,
    mixinDialogFormParent,
    mixinAccess,
  ],
  components: {
    dialogForm,
    dialogOperation,
    dialogSet,
  },
})
export default class equipmentManageDoorTable extends Vue {
  @Action("equipmentDoor/manageDelete") itemDel: any;
  @Action("equipmentDoor/managedoor") getList: any;
  @State((state) => state.sharing.netType) doorNetData: any;
  @State((state) => state.sharing.doorDirect) doorDirectData: any;
  @State((state) => state.sharing.doorGysCode) doorGysCodeData: any;
  @State((state) => state.sharing.onLineStatusData) onLineStatusData: any;

  table: any = {
    btns: [
      {
        label: "编辑",
        condition: ["permissionsData.edit"],
        enabledCondition: [
          function ({ row }) {
            return row.yard_sn == "";
          },
        ],
        handleClick: (this as any).onEditClick,
      },
      {
        label: "删除",
        condition: ["permissionsData.del"],
        enabledCondition: [
          function ({ row }) {
            return row.yard_sn == "";
          },
        ],
        handleClick: (this as any).onDelClick,
      },
      {
        label: "设置",
        condition: ["permissionsData.set"],
        param: "dialogSet",
        handleClick: (this as any).onEditClick,
      },
      {
        label: "门禁指令",
        condition: ["permissionsData.remote"],
        /* enabledCondition: [
                    function ({ row }) {
                        return ['xsj'].includes(row.door_gyscode);
                    }], */
        param: "dialogOperation",
        handleClick: (this as any).onEditClick,
      },
    ],
    // 列配置
    columns: [
      {
        fixed: "left",
        width: 70,
        type: "seq",
        title: "序号",
      },
      {
        fixed: "left",
        width: 250,
        title: "门禁GUID",
        field: "door_guid",
        className: function ({ row }) {
          if (row.line_way > 1) {
            if (row.door_status == 1) {
              return "green";
            } else {
              return "red";
            }
          }
        },
      },
      {
        width: 160,
        title: "门禁名称",
        field: "door_name",
      },
      {
        width: 130,
        title: "门禁协议",
        field: "door_gyscode",
        params: "doorGysCodeData",
        formatter: (this as any).formatterData,
      },
      {
        width: 100,
        title: "绑定园区",
        field: "yard_name",
      },
      {
        width: 70,
        title: "人脸",
        field: "is_face",
        formatter: function ({ cellValue }) {
          return ["", "支持", "不支持"][cellValue];
        },
        className: function ({ row }) {
          return ["", "green ", "red"][row.is_face];
        },
      },
      {
        width: 80,
        title: "密码开门",
        field: "is_temp_pwd",
        formatter: function ({ cellValue }) {
          return ["", "支持", "不支持"][cellValue];
        },
        className: function ({ row }) {
          return ["", "green ", "red"][row.is_temp_pwd];
        },
      },
      {
        width: 100,
        title: "二维码主扫",
        field: "is_qrcode_active",
        formatter: function ({ cellValue }) {
          return ["", "支持", "不支持"][cellValue];
        },
        className: function ({ row }) {
          return ["", "green ", "red"][row.is_qrcode_active];
        },
      },
      {
        width: 70,
        title: "IC卡",
        field: "is_id_card",
        formatter: function ({ cellValue }) {
          return ["", "支持", "不支持"][cellValue];
        },
        className: function ({ row }) {
          return ["", "green ", "red"][row.is_id_card];
        },
      },
      {
        width: 70,
        title: "梯控",
        field: "is_tk",
        formatter: function ({ cellValue }) {
          return ["", "支持", "不支持"][cellValue];
        },
        className: function ({ row }) {
          return ["", "green ", "red"][row.is_tk];
        },
      },
      {
        width: 80,
        title: "门ID",
        field: "lift_code",
      },
      {
        width: 150,
        title: "创建时间",
        field: "created_at",
      },
      {
        showOverflow: "ellipsis",
        fixed: "right",
        slots: { default: "operate" },
        title: "操作",
        width: 240,
      },
    ],
  };
  tkData: any = [
    { label: "支持", value: "1" },
    { label: "不支持", value: "2" },
  ];
  // 查询头下拉数据配置
  headerSelectList: any = [
    {
      dataName: "doorGysCodeData",
      keyName: "door_gyscode",
    },
    {
      dataName: "onLineStatusData",
      keyName: "door_status",
    },
    {
      dataName: "tkData",
      keyName: "is_tk",
    },
  ];
  // 查询头配置
  enquiryData: any = {
    fields: [
      {
        field: "door_gyscode",
        fieldType: "select",
        label: "门禁厂商",
      },
      {
        field: "door_name",
        label: "门禁名称",
      },
      {
        field: "door_guid",
        label: "门禁GUID",
      },
      {
        label: "在线状态",
        fieldType: "select",
        field: "door_status",
      },
      {
        label: "梯控",
        fieldType: "select",
        field: "is_tk",
      },
    ],
    btns: [],
  };
}
</script>
